<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <link rel='stylesheet' href='css/init.css'>
    <link rel='stylesheet' href='css/tables.css'>
</head>
<body>
    <div class="wrapper">
        <!-- <div class="card open">
            <div class="card-header">
                <button class="open-button">已存在的元素</button>

                <div class="open-1" style="background-color: #000; color: #fff;">open html</div>
            </div>
            <div class="card-body">
                <div class="info table-responsive">
                </div>
            </div>
        </div> -->

        <div class="card confirm">
            <div class="card-header">
                <button class="confirm-button">询问层</button>
            </div>
            <div class="card-body">
                <div class="info table-responsive">
                </div>
            </div>
        </div>

        <div class="card msg">
            <div class="card-header">
                <button class="msg-button">短消息</button>
                <button class="msg-button">停顿4秒</button>
                <button class="msg-button">顶部消息</button>
                <button class="msg-button">底部消息</button>
                <button class="msg-button">带图标</button>
                <button class="msg-button">白色风格</button>
                <button class="msg-button">回调函数</button>
            </div>
            <div class="card-body">
                <div class="info table-responsive">
                    <table class="table table-bordered">
                        <tr>
                            <td colspan="3">
                                表达式: layer.msg(
                                    <em>tip</em>,
                                    <em>config</em>,
                                    <em>end</em>
                                )
                            </td>
                        </tr>
                        <tr>
                            <td width="120">参数</td>
                            <td width="200">说明</td>
                            <td>属性</td>
                        </tr>
                        <tr>
                            <td>tip</td>
                            <td>消息内容</td>
                            <td>[类型: string] [必填]</td>
                        </tr>
                        <tr>
                            <td>config.time</td>
                            <td>停顿秒数</td>
                            <td>[类型: number] [可选] [默认: 1]</td>
                        </tr>
                        <tr>
                            <td>config.offset</td>
                            <td>坐标</td>
                            <td>
                                <p>[类型:string] [可选] [默认:m(中间)] [选值]</p>
                                <p>
                                    m ===> 中间,
                                    t ===> 顶部,
                                    r ===> 右边,
                                    b ===> 底部,
                                    l ===> 左边,
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>config.icon</td>
                            <td>图标</td>
                            <td>
                                <p>[类型: number] [可选] [默认: 0 (无图标)] [选值]</p>
                                <p>
                                    0 ===> 无图标
                                </p>
                                <p>
                                    1 ===> success
                                </p>
                                <p>
                                    2 ===> error
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>config.type</td>
                            <td>风格</td>
                            <td>
                                <p>[类型: number] [可选] [默认: 1 (黑色)] [选值]</p>
                                <p>
                                    1 ===> 黑色
                                </p>
                                <p>
                                    2 ===> 白色
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>config.zindex</td>
                            <td>层叠顺序</td>
                            <td>[类型:number] [可选] [默认:99999]</td>
                        </tr>
                        <tr>
                            <td>end</td>
                            <td>回调函数</td>
                            <td>[类型:function] [可选] [默认:无]</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="js/layer.js"></script>
<script>
    // 事件封装
    function addEvent(elem, type, handle) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handle, false);
        }else if(elem.attachEvent) {
            elem.attachEvent('on' + type, handle);
        }else{
            elem['on' + type] = handle;
        }
    }
</script>

<script>
(function () {
    // msg start ---------------------------------------------------------------
    var msg_button = document.getElementsByClassName('msg-button');

    for (var i = 0; i < msg_button.length; i++) {
        (function (i) {
            addEvent(msg_button[i], 'click', function() {
                switch (this.innerHTML) {
                    case '短消息':
                        return layer.msg(this.innerHTML);
                    case '停顿4秒':
                        return layer.msg(this.innerHTML, {time: 4});
                    case '顶部消息':
                        return layer.msg(this.innerHTML, {offset: 't'});
                    case '底部消息':
                        return layer.msg(this.innerHTML, {offset: 'b'});
                    case '带图标':
                        return layer.msg(this.innerHTML, {icon: 1, time: 40});
                    case '白色风格':
                        return layer.msg(this.innerHTML, {icon:2, type: 2});
                    case '回调函数':
                        return layer.msg(this.innerHTML, {
                                icon: 2
                            }, function () {
                                console.log('call back');
                                // alert(666);
                            });
                    default:
                        return layer.msg(this.innerHTML);
                }
            });
        }(i));
    }
    // msg end   ---------------------------------------------------------------

    // confirm start -----------------------------------------------------------
    var confirm_button = document.getElementsByClassName('confirm-button');

    for (var i = 0; i < confirm_button.length; i++) {
        (function (i) {
            addEvent(confirm_button[i], 'click', function() {
                switch (this.innerHTML) {
                    case '询问层':
                        return layer.confirm(this.innerHTML, {
                            title: '询问层',
                            btn: ['重要','奇葩'],
                        }, function() {
                            console.log(111)
                        }, function() {
                            console.log(222)
                        });
                    default:
                        return layer.confirm(this.innerHTML);
                }
            });
        }(i));
    }
    // confirm end   -----------------------------------------------------------


    // open start --------------------------------------------------------------
    var open_button = document.getElementsByClassName('open-button');

    for (var i = 0; i < open_button.length; i++) {
        (function (i) {
            addEvent(open_button[i], 'click', function() {
                switch (this.innerHTML) {
                    case '已存在的元素':
                        return layer.open({
                            type: 1,
                            title: 'this is a test content',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['380px', '90%'],
                            content: '.open-1',
                        });
                    default:
                        return ;
                }
            });
        }(i));
    }
    // open end   --------------------------------------------------------------
}());
</script>
</html>
